<template>
  <el-dialog :visible="visible" title="Detail" :show-close="false">
    <div style="height: 400px;">
      <el-steps :active="order">
        <el-step v-for="i in list.length" :key="i" :title="'Question ' + i" />
      </el-steps>
      <br>
      <br>
      <el-carousel :autoplay="false" trigger="click" arrow="always" height="300px" @change="change">
        <el-carousel-item v-for="(item, index) in list" :key="index">
          <div style="text-align: center; margin-top: 10%">
            <h3>{{ item.problem }}</h3>
            <br>
            <br>
            <el-radio-group v-for="(option, idx) in item.options" :key="idx" v-model="item.radio">
              <el-radio :label="option">{{ option }}</el-radio>
              <span />
            </el-radio-group>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div v-show="order === list.length" style="text-align: center">
        <el-button type="success" icon="el-icon-reading" @click="submit">Submit</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'QuizPaper',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      order: 1,
      res: []
    }
  },
  methods: {
    change(nowIdx) {
      this.order = nowIdx + 1
    },
    submit() {
      this.$emit('submit', this.list.map((item) => {
        return { 'problem': item.problem, 'radio': item.radio, 'correct': item.correct }
      }))
    }
  }
}
</script>

<style scoped>

</style>
